<template>

    <!-- 搜索 -->
    <div v-if="activeName === 'first'">
    <div class="common-layout">
      <el-row type="flex" style="background-color:#fff;height:180px">
        <el-form :model="pageParams" class="demo-form-inline" ref="Clueformdata">
          <el-form-item label="线索ID" name="id" >
            <el-input placeholder="请输入" v-model="pageParams.id"    class="my-input" />
          </el-form-item>
          <el-form-item label="手机号" name="phone">
            <el-input placeholder="请输入" v-model="pageParams.phone" />
          </el-form-item>
      <el-form-item label="渠道来源" prop="sourceChannel" >
            <el-select placeholder="请选择" v-model="pageParams.sourceChannel">
               <el-option v-for="item in disciplineintention" :key="item.id" :value="item.content">  {{item.content}} </el-option>
          
            </el-select>
          </el-form-item>

             <el-form-item label="创建日期" name="startime">
       
              <el-date-picker type="date" label="Pick a date" placeholder="Pick a date" v-model="pageParams.startime"/>
       
          </el-form-item>

        </el-form>
        <el-col :span="24" style="display: flex; justify-content:end;margin:-50px 00px 0px -30px">
          <el-button
          class="searchbtn green"
            type="primary"
            size="large"
            style="width:100px;"
            @click="getTableListAPI"
            >搜索</el-button>
          <el-button size="large" style="width:100px"  class="searchbtn" @click="closebtn">重置</el-button>
        </el-col>
      </el-row>
    </div>
  
  <!-- 新建线索等按钮 -->
  <el-row class="tablehead">
    <el-col span="10"> 已选<span style="color:#05cc95">12</span>项</el-col>
    <el-col span="10" style="margin-right:50px">
      <el-button 
      type="primary" 
      size="large" 
      style="width:120px;background:#FD7065"
      class="searchbtn "
      @click="Bulkharvestingbtn">批量捞取</el-button
      >
     
    </el-col>
 
  </el-row>
  <el-table :data="list"   
  :default-sort="{ prop:'time',order:'descending' }"
  @selection-change="handleChange"
   row-key="id"  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="线索ID" prop="id"></el-table-column>
    <el-table-column label="手机号" prop="phone"></el-table-column>
    <el-table-column label="渠道来源" prop="sourceChannel"></el-table-column> 
    <el-table-column label="活动名称" prop="activityImformation"></el-table-column>
  
    <el-table-column
     label="创建时间" prop="createTime"
     sortable
     ></el-table-column>
    <el-table-column label="操作">
      <template v-slot="{ row }">
         <el-button type="text"    @click="opportunitybtn(row.id)">捞取</el-button>
     
      </template>
    </el-table-column>
  </el-table>

<el-col :span="24" style="display:flex;  justify-content: center;margin-top:40px">
    <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.pagesize"
    :page-sizes="[10]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageParams.total"
    @size-change="handleSizeChange"
    @current-change="changePage"

  />
</el-col>

  <!-- 捞取弹窗 -->
    <el-dialog
    title=""
    v-model="opportunitydialog"
     style="width:400px;  text-align: center;">
    <span>确认捞取?</span>
        <div style="display: flex;justify-content: center;margin-top:30px">
        <el-button @click="opportunitydialog=false" class="searchbtn" style="width:100px;height:40px"
          >取消</el-button
        >
        <el-button
         class="searchbtn green" 
         type="primary" size="large"
          style="width: 100px"
      
          >确定</el-button
        >
      </div>
  </el-dialog>

<!-- 批量捞取弹窗 -->
<el-dialog
    title=""
    v-model="Bulkharvestingdialog"
     style="width:400px;  text-align: center;">
   
    <span>您已选择4条线索</span>
    <el-col :span="24">确定捞取？</el-col>
        <div style="display: flex;justify-content: center;margin-top:30px">
        <el-button @click="Bulkharvestingdialog=false" class="searchbtn" style="width:100px;height:40px"
          >取消</el-button
        >
        <el-button class="searchbtn green" type="primary" size="large" style="width: 100px"     @click="Fishforokay"
          >确定</el-button
        >
      </div>
  </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import {getCluepoolList,BulkharvestingApi} from '@/api/Cluepool'
// import { ElMessageBox, ElMessage } from 'element-plus'
import {cxTabelCourse} from '@/api/course'
//捞取按钮
const opportunitydialog=ref(false)
const opportunitybtn=()=>{
  opportunitydialog.value=true
}



const ids=ref({})
//批量捞取按钮
const Bulkharvestingdialog=ref(false)
const Bulkharvestingbtn=()=>{
    Bulkharvestingdialog.value=true
   ids.value=selectedIds
   console.log(ids.value);
}

const activeName=ref('first')


const pageParams = ref({
  page: 1,
  size: 10,
  total: 10,
  endTime:'',
  startime:'',
  //线索ID
  id: '',
  sourceChannel:'',



  //手机号
  phone: '',
  //渠道来源

})
const list = ref([])

//发送获取列表请求
const getTableListAPI = async () => {
 const {data,total} = await getCluepoolList(pageParams.value)
 list.value=data
console.log( list.value );
pageParams.value.total=+total

}


const Fishforokay=async()=>{

await BulkharvestingApi(ids)
}


//分页
const changePage = (newPage) => {
  pageParams.value.page = newPage
  getTableListAPI()
}

//获取点击的多选id
const selectedIds =ref([])
// const selectedlength =ref([])
const handleChange=(val)=>{
selectedIds.value =  val.map(item => item.id)
console.log(selectedIds.value)

}

const disciplineintention = ref([])
const discipline = async () => {
 const { data } = await cxTabelCourse(16)
 disciplineintention.value = data
 console.log( disciplineintention.value);

}
 const Clueformdata = ref(null)
//重置表单
const closebtn=()=>{
 Clueformdata.value.resetFields()
}

//挂载
onMounted(() => {
  getTableListAPI()
  discipline()
})
</script>

<style scoped lang="less">
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
background-color: #fff;
width: 100%;
}

.el-select {
  width: 280px;
  height: 40px;
}
::v-deep .el-input__wrapper {
  width: 280px;
  border-radius: 7px;
  height: 45px;
  background-color: #fdfdfd;

}

.el-form-item {
  display: block;
  margin-left: 20px;
  margin-right: 40px;
}
.demo-tabs {
  background-color: #fff;
}
.searchbtn{
    border-radius: 20px;
}
.green{
    background: #05cc95;
}
.tablehead{
justify-content: space-between;
height:100px;
line-height: 100px;
background-color: #f6f6f6;
}
.el-checkbox__inner::before{
  content:'-';
  position:absolute;
  top:50%;
  left:15%;
  transform:translateY(-50%);
  color:#fff;
}
.el-pagination{
  ::v-deep .el-input__wrapper {
  width: 280px;
  border-radius: 7px;
  height: 30px;
  background-color: #f8f8f8;
}
}

  .el-input {
  width: 280px;
  border-radius: 7px;
  height: 20px;
  background-color: #fbfbfb;
}
 
 .common-layout{
  ::v-deep .el-input__wrapper {
  width: 260px;
  border-radius: 7px;
  height: 45px;
  background-color: #f5f5f5;
}

 }
.el-tabs__content {
height:250px
}

</style>
